<template>
	<view class="page-view">
		<navBar title="故障登记"></navBar>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<sanCode :equpInfo="{}" :deviceCode="equpInfo.barcode" :isDisabled="false" :query-api="getEqupInspection" :data="'equpNo'" @confirmCode="confirmCode" style="margin-bottom:0"></sanCode>
		</view>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>报修人信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="ml-48rpx mr-48rpx mt-24rpx item-view flex-wrap-left" :class="isEmpInfo?'mb-38rpx':''">
				<label>人员编号:</label>
				<view class="form-input flex-space-between">
					<input class="uni-input" v-model="jobNumber" @blur="callByConfirm" placeholder="请输入人员编码" />
					<image class="w-44rpx h-44rpx qr-img" src="@/static/icon_qr.png" mode="" @click="scanCode()"></image>
				</view>
			</view>
			<view class="flex-space-between ml-48rpx mr-48rpx mb-24rpx device-view" v-if="isEmpInfo">
				<view class="text-view">
					<label for="">人员编号：</label>
					<text class="u-line-1">{{empInfo.job_number}}</text>
				</view>
				<view class="text-view">
					<label for="">人员名称：</label>
					<text class="u-line-1">{{empInfo.job_name}}</text>
				</view>
			</view>
		</view>
		<view class="bgfff mb-104rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>故障描述
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="fault-view flex-wrap-left">
				<label>故障描述</label>
				<!-- <text>{{equpInfo.faultDesc}}</text> -->
				<view class="form-input flex-space-between">
					<textarea v-model="equpInfo.faultDesc" :maxlength="200" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="请输入故障描述" />
					<!-- <input class="uni-input" v-model="equpInfo.faultDesc" :maxlength="200" placeholder="请输入故障描述" /> -->
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="worker-view flex-wrap-left">
				<u-upload
					width="200"
					height="200"
					:file-list="fileList"
					@on-choose-complete="afterRead"
					@on-remove="deletePic"
					accept="image"
					name="1"
					:maxCount="6"
				>
				<image src="https://image01.homedo.com/Files/Images/cms/www/20230710/5554574190133078382_pic1.png"  mode="widthFix" style="width: 200rpx;height: 200rpx;"></image>
				
				</u-upload>	
			</view>
		</view>
		<view class="suctionbottom">
			<view class="yes button" v-if="equpInfo.selfNumbering && equpInfo.faultDesc && fileList.length>0" @click="submitBtn">
				提交
			</view>
			<view class="no button" v-else>
				提交
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
import { ref, onMounted,reactive } from 'vue'
import {deleteEqupManageImage,addFault,queryEmpInfo} from '@/common/api/equpManage'
import {getEqupInspection} from '@/common/api/keepPlan'
import { BASE_URL } from '@/config';
const isInfoShow = ref<boolean>(false);
const isEmpInfo = ref<boolean>(false);
const equpInfo = ref({
	"id": 0,
    "barcode": "",
    "equpName": "",
    "equpNo": "",
    "processDesc": "",
    "repairsTime": "",
    "faultDesc": "",
    "callBy": "",
    "callName": "",
    "handleCode": "",
    "handleName": "",
    "imageList": [],
    "repairStatus": 1,
    "isEntrust": "",
    "entrustInfo": "",
    "isSpare": "",
    "spareCode": "",
    "spareName": "",
    "managerStatus": "",
    "managerRemark": "",
    "selfNumbering": "",
    "equipmentName": "",
    "fixedAssets": "",
    "specificationAndModel": "",
});
const empInfo = ref({
	"job_name": "",
	"job_number": "",
})
const fileList = reactive([]);
const ids = reactive([]);
const userInfo = ref({
	userId:""
});
const jobNumber = ref('');
onMounted(()=>{
	userInfo.value = uni.getStorageSync('userInfo');
})
//人员输入框失去焦点
const callByConfirm = (e:any)=>{
	getEmpInfo(e.detail.value);
}
const scanCode = ()=> {
	 // 允许从相机和相册扫码
	 uni.scanCode({
		 success: function (res) {
			 //人员编码
			jobNumber.value = res.result;
			getEmpInfo(res.result);
		 }
	 });
}
const confirmCode = (data:any)=>{
	isInfoShow.value = true
	equpInfo.value = data;
}
// 人员信息
const getEmpInfo = (code:string)=> {
	queryEmpInfo({
		jobNumber: code,
	}).then(data=>{
		if(data){
			isEmpInfo.value = true;
			empInfo.value = data;
		}
		
	})
}
// 新增图片
const afterRead = (lists)=> {
	let fileListLen = fileList.length;
	for(let i = fileListLen;i<lists.length;i++){
		fileList.push({
			...lists[i],
			status: 'uploading',
			message: '上传中'
		})
		const result = uploadFilePromise(lists[i].url);
		let item = fileList[fileListLen];
		fileList.splice(fileListLen, 1, Object.assign(item, {
			status: 'success',
			message: '',
			url: result
		}))	
	}
}
const uploadFilePromise =(url:string) => {
	return new Promise((resolve) => {
		let a = uni.uploadFile({
			url: BASE_URL+'/pad/equpManager/upLoadEqupManageImage', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			header:{
				'Satoken': uni.getStorageSync('token')
			},
			success: (res:any) => {
				setTimeout(() => {
					resolve(res.data.data)
					const parseData = JSON.parse(res.data)
					ids.push(parseData.data.id)
				}, 1000)
			}
		});
	})
}
// 删除图片
const deletePic = (index:number)=> {
	deleteEqupManageImage({id:ids[index]}).then(res => {
		if(res.code == '2000') {
			ids.splice(index, 1)
			fileList.splice(index, 1);
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
		}
	}).catch((e) => {
	  console.log(e, '报错了')
	})
}

const submitBtn = ()=>{
	addFault({
	  "barcode": equpInfo.value.barcode,
	  "callBy": empInfo.value.job_number,
	  "callName": empInfo.value.job_name,
	  "equpName": equpInfo.value.equipmentName,
	  "equpNo": equpInfo.value.fixedAssets,
	  "equpCode": equpInfo.value.specificationAndModel,
	  "faultDesc": equpInfo.value.faultDesc,
	  "id": equpInfo.value.id,
	  "pictureUrl": ids.join(','),
	  "processDesc": equpInfo.value.processDesc,
	  "repairsTime": equpInfo.value.repairsTime,
	  "userId": userInfo.value.userId
	}).then(res=>{
		if(res.code===2000){
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			uni.redirectTo({
				url: '/pages/homePage/index',
			});
		}
	})
}
</script>

<style lang="scss" scoped>
	.page-view{
		background-color: #f5f5f5;
		height: 100vh;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	.item-view{
		label{
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-input-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.fault-view{
		margin:24rpx 48rpx;
		label{
			// width: 120rpx;
			// height: 48rpx;
			// font-size: 28rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			// font-weight: 400;
			// color: rgba(0,0,0,0.65);
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		text{
			height: 48rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.85);
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			uni-textarea{
				width: 100%;
				height: 100%;
				padding-top:28rpx;
				padding-bottom:24rpx;
				box-sizing: border-box;
			}
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-textarea-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
				// line-height: 88rpx;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.worker-view{
		margin-left:48rpx;
		margin-right:48rpx;
		margin-top: 42rpx;
		::v-deep .u-upload{
			align-items:flex-start;
		}
		::v-deep .u-list-item{
			border-radius: 2rpx;
			border: 2rpx solid rgba(0,0,0,0.15);
		}
		::v-deep .u-list-item{
			margin: 0;
		}
		::v-deep .u-preview-wrap{
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			overflow: inherit;
			&:nth-child(3n){
				margin-right: 0;
			}
			.u-delete-icon{
				background: rgba(0,0,0,0) !important;
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: -16rpx;
				top: -16rpx;
				background-image: url('@/static/nav_ic_clear.png') !important;
				background-size: 100% !important;
				background-repeat: no-repeat !important;
				.u-icon__icon{
					&:before{
						content:none
					}
				}
			}
			// &::after{
			// 	content:'';
			// 	width: 32rpx;
			// 	height: 32rpx;
			// 	position: absolute;
			// 	left: -16rpx;
			// 	top: -16rpx;
			// 	background-image: url('@/static/nav_ic_clear.png');
			// 	background-size: 100%;
			// 	background-repeat: no-repeat;
			// }
		}

		::v-deep .u-add-tips{
			display: none;
		}
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
</style>
